<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- 第三种：外链方式，通常写在head元素里 -->
    <link rel="stylesheet" type="text/css" href="./css/base.css" />
    <title>HTML第二章 - CSS3</title>
    <!-- 第二种：内嵌方式，通常写在head元素里 -->
    <style type="text/css">
      body{
        /* background-image: url('https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=138&f=JPEG?'); */
      }
      .css-wrap{
        width: 200px;
        height: 200px;
        background-color: brown;
      }
      /* 第四种：导入式 */
      @import url(css/base.css);

      .unit{
        font-size: 16px;

      }
      .unit p{
        font-size: 1em;
      }


      .important:hover{
        color: #ff8bf4;
        /* font-size: 22px; */
      }

      ul.list li :nth-child(1), ul.list li:nth-child(3), ul.list li:nth-child(5){
        background-color: #ff8bf4;
      }

      ul.list li:nth-child(3n){
        background-color: #ff8bf4;
      }
      ul.list li:nth-child(an + b){
        background-color: #ff8bf4;
      }


      .float-warp{
        border: 2px solid red;
      }
      .float-warp div {
        border: 1px solid blue;
      }

      .box1{
        width: 200px;
        height: 100px;
      }

      .box2{
        width: 100px;
        height: 50px;
      }

      .box3{
        width: 150px;
        height: 80px;
      }

      .position-warp{
        border: 5px solid red;
      }

      .position-warp div{
        border: 1px solid yellowgreen;
      }

      .position-warp div.box1{
        background-color: brown;
      }

      .position-warp div.box2{
        background-color: blue;
      }

      .position-warp div.box3{
        background-color: crimson;
      }

      .flex-warp .flex-item{
        display: flex;
      }

      .flex-warp .flex-item *{
        border: 1px solid #b1a4a4;
        background-color: #f1f1f1;
      }

      .grid-warp .grid-container{
        display: grid;
        grid-template-rows: repeat(3, 100px);
        grid-template-columns: repeat(auto-fill, 400px);
        gap: 20px;
        /* row-gap: 50px;
        column-gap: 30px; */
        grid-template-areas:  'a a b' 
                              'c d d' 
                              'e e e';
        border: 1px solid black;
      }
      .grid-container div{
        border: 1px solid #ff8bf4;
      }

      .trans-warp .translate{
        margin: 100px;
        /* css属性 过渡效果花费时间 过渡效果时间曲线 过渡效果开始时间 */
        transition: all 2.5s ease-in-out 0s;
      }

      .trans-warp .translate:hover{
        font-size: 26px;
        font-weight: 800;
        color: brown;
        transform: translate(10px, 20%);
        transform: scale(1.5);
        transform: translate(47px, 20%) rotate(45deg) scale(-1.5) skew(29deg, 0deg);
        transform: rotate(45deg);
        transition: font-size 1.5s ease-in-out 0s;
        animation: animation1 8s linear;
      }

      .trans-warp:hover .animation{
        font-size: 26px;
        font-weight: 800;
        color: brown;
        animation: animation1 8s linear;
      }

      @keyframes animation1{
        0%{
          background-color: red;
          width: 100px;
          height: 100px;
        }
        25%{
          background-color: orchid;
          width: 200px;
          height: 200px;
        }
        75%{
          background-color: green;
          width: 100px;
          height: 100px;
        }
        100%{
          background-color: blue;
          width: 200px;
          height: 200px;
        }
      }
    </style>
  </head>
  <body>
    <p>CSS3</p>
    <span>1.引入方式</span>
    <!-- 引入样式表 -->
    <!-- 第一种：内联样式 -->
    <div id="css" style="width: 100px;height:100px" class="css-wrap"></div>
    <p>3.取值与单位</p>
    <div class="unit">
      <p>16px</p>
    </div>
    <p>4.CSS样式</p>
    <div class="">
      <p style="color: #ff8bf4;">字体颜色</p>
      <p title="my name is Lilei!" style="width: 30px;">my name is Lilei!</p>
      <!-- 文本超出结尾显示省略号，鼠标悬浮显示全部文本 -->
      <p title="这是一行换行文字" style="width: 50px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
        这是一行换行文字
      </p>

      <ul class="list" style="list-style: none;">
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
        <li>第四行</li>
        <li>第五行</li>
        <li>第六行</li>
        <li>第七行</li>
      </ul>

      <div class="important">一个类名</div>
      <p class="important important-item">两个类名</p>
      <span id="name">id</span>

      <!-- 复合选择器 -->
      <div class="root">
        <div class="div1">
          <span class="span1"></span>
          <div class="div2">
            <span class="span2"></span>
            <div class="div3">
            </div>
          </div>
        </div>
        <p class="p1"></p>
        <p class="p2"></p>
        <p class="p3"></p>
      </div>

      <!-- CSS浮动 -->
      <div class="float-warp">
        <div class="box1">浮动样式第一个div元素</div>
        <div class="box2">浮动样式第二个div元素</div>
        <div class="box3">浮动样式第三个div元素</div>
      </div>

      <!-- CSS定位 -->
      <div class="position-warp">
        <div class="box1">定位第一个div元素</div>
        <div class="box2">定位第二个div元素</div>
        <div class="box3">定位第三个div元素</div>
      </div>

      <!-- Flex布局 -->
      <p>Flex布局</p>
      <div class="flex-warp">
        <div class="flex-item flex-item1">
          <span style="padding: 10px;">11111</span>
          <div style="width: 100px;height: 50px;">22222</div>
        </div>
        <div class="flex-item flex-item2">
          <span style="padding: 10px;">33333</span>
          <div style="width: 100px;height: 50px;">44444</div>
        </div>
        <div class="flex-item flex-item3">
          <span style="padding: 10px;">55555</span>
          <div style="width: 100px;height: 50px;">666666</div>
        </div>
      </div>

      <!-- Grid布局 -->
      <div class="grid-warp">
        <div class="grid-container">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
          <div>10</div>
          <div>11</div>
          <div>12</div>
          <div>13</div>
        </div>
      </div>
    </div>

    <!-- CSS高级应用 -->
    <!-- 1.转换 -->
    <div class="trans-warp" style="width: 100%;height: 600px;background-color: black;">
      <div class="translate" style="width: 200px;height: 200px;background-color: #ff8bf4;">
        transtion过渡文字
      </div>

      <div class="animation" style="width: 200px;height: 200px;background-color: #ff8bf4;">
        animation过渡文字
      </div>
    </div>

    <script type="text/javascript">
      // 选择器
      // 1.标签选择器
      document.querySelectorAll('p')
      // 2.类选择器
      document.querySelectorAll('.important')
      document.querySelectorAll('.important.important-item')
      document.querySelectorAll('p.important')
      // 3.id选择器
      document.querySelectorAll('#name')
      // 4.属性选择器
      document.querySelectorAll('span[id="name"]')

      // 伪类
    </script>
  </body>
</html>